<template>
  <div>
    <div id="Detail" v-cloak>
      <div v-if="shopDetail.auction_state == 0 || deleted == true" class="nofind">
        <img src="../../assets/images/home/icon_404.png" alt=""/>
        <p class="delete">拍品不存在或已被删除</p>
      </div>
      <view-box ref="viewBox" v-else>
        <div class="main">
          <div class="top">
            <div class="bcontent">
              <x-header :left-options="{showBack: false}" class="header">
                <a slot="left" @click="back()"><i class="dec icon-white-back"></i></a>
                <a slot="right" @click="shareClick()"><i class="dec icon-white-share "></i></a>
              </x-header>
              <div class="imglist">
                <swiper :index="imgindex" @on-index-change="indexChange" :show-desc-mask="false" auto :interval="5000"
                        :show-dots="false" :aspect-ratio="536/750">
                  <swiper-item v-for="(item,index) in imgLists" :key="index">
                    <a href="javascript:;" @click="getphoto(index)">
                      <img :src="item.msrc" class="vux-img" style="object-fit: cover"/>
                    </a>
                  </swiper-item>
                </swiper>
                <previewer :list="imgLists" ref="previewer"></previewer>
                <div class="endtime">
                  <i class="re-icon icon-time"></i>
                  <count-down v-if="cache" :currentTime="parseInt(cur_time)" :startTime="shopDetail.auction_starttime"
                              :endTime="shopDetail.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'"
                              :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'"
                              :secondsTxt="'秒'"></count-down>
                  <span class="count">{{imgindex}}/{{imgLists.length}}</span>
                </div>
              </div>
            </div>
            <div class="info">
              <p class="name">{{shopDetail.goods_name}}</p>
              <div class="price">
                <div class="current-price">
                  <span class="txt">当前价</span>
                  <span id="num">{{shopDetail.auction_bidprice}}</span>
                  <span class="yuan">元</span>
                </div>
                <div class="val-price">市场估价 ￥{{goodsDetail.goods_price}}</div>
              </div>
              <div class="state" style="color: #0cab9a;" v-if="shopDetail.auction_starttime - cur_time > 0"><i
                class="re-icon icon-preview"></i>预展中
              </div>
              <div class="state" style="color: #aaa;" v-else-if="shopDetail.auction_endtime - cur_time < 0 "><i
                class="re-icon icon-end"></i>已结拍
              </div>
              <div class="state" v-else><i class="re-icon icon-hammer"></i>拍卖中</div>
            </div>
            <div class="price-box">
              <card>
                <div slot="content" class="card-price-flex">
                  <div class="vux-1px-r">
                    <span>{{shopDetail.auction_startprice}}</span>
                    <p>起拍价（元）</p>
                  </div>
                  <div class="vux-1px-r">
                    <span>{{shopDetail.auction_step}}</span>
                    <p>加价幅度（元）</p>
                  </div>
                  <div>
                    <span>{{shopDetail.auction_deposit}}</span>
                    <p>保证金（元）</p>
                  </div>
                </div>
              </card>
            </div>
            <div class="safe">
              <ul>
                <li><i class="by-icon icon-safe"></i>消费者保障</li>
                <li v-if="shopDetail.auction_shipfee == 0"><i class="by-icon icon-email"></i>包邮</li>
                <li v-if="shopDetail.auction_return == 1"><i class="by-icon icon-refund"></i>售后</li>
                <li v-if="goodsDetail.appraisal_from == 'other' || goodsDetail.appraisal_from == 'appraisal_site'"><i
                  class="by-icon icon-cert"></i>鉴定证书
                </li>
              </ul>
            </div>
          </div>
          <div class="signup-free" v-if="shopDetail.auction_deposit == 0">
            <img src="../../assets/images/home/icon_signup_free.png" alt=""/>
            <p>0元保证金拍品，若交易出现问题支持退还所有支付的货款</p>
          </div>
          <!--出价记录-->
          <div class="body">
            <div class="record">
              <router-link :to="'/Record/id/' + shopDetail.auction_id">
                <h5>
                  <i class="re-icon icon-record"></i>出价记录
                  <span>（<label id="num">{{shopDetail.bidding_count}}</label>条）</span>
                  <i class="re-icon icon-right"></i>
                </h5>
              </router-link>

              <div class="list">
                <div class="box" id="box">
                  <div class="item nodata" v-if="bidding_list==''">
                    <p>暂无竞拍记录</p>
                  </div>
                  <div class="item" v-for="(item,index) in bidding_list" v-else :key="index">
                    <p class="rank active" v-if="index == 0">领先</p>
                    <p class="rank" v-else>出局</p>
                    <div class="item-box">
                      <img :src="'/los/uploads/thumb/header/' + item.member_id + '_80X80.jpeg'"/>
                      <p class="name">{{item.member_nickname.substr(0,1) + '***'
                        +item.member_nickname.substr(item.member_nickname.length-1,1)}}</p>
                      <p class="price">￥{{item.bidding_money}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--拍卖说明-->
            <div class="progress">
              <div class="title">
                <img src="../../assets/images/home/icon_signup.png" alt=""/>
                <h2>竞拍流程</h2>
                <i class="re-icon icon-right"></i>
              </div>
              <div class="imgs">
                <div class="imgWrap">
                  <img src="../../assets/images/home/icon_progress1.png" alt=""/>
                  <img class="icon" src="../../assets/images/home/icon_progress_right.png" alt=""/>
                  <img src="../../assets/images/home/icon_progress2.png" alt=""/>
                  <img class="icon" src="../../assets/images/home/icon_progress_right.png" alt=""/>
                  <img src="../../assets/images/home/icon_progress3.png" alt=""/>
                  <img class="icon" src="../../assets/images/home/icon_progress_right.png" alt=""/>
                  <img src="../../assets/images/home/icon_progress4.png" alt=""/>
                  <img class="icon" src="../../assets/images/home/icon_progress_right.png" alt=""/>
                  <img src="../../assets/images/home/icon_progress5.png" alt=""/>
                </div>
                <div class="desc">
                  <span>交保证金</span><span>参拍出价</span><span>价高者得</span><span>支付货款</span><span>获得拍品</span>
                </div>
              </div>
            </div>
            <div class="shop">
              <div class="shop-title">
                <img v-if="shopInfo.shop_id == undefined" src="../../assets/images/home/defaultImg.jpg"/>
                <img v-else :src="'/los/uploads/thumb/shop/' + shopInfo.shop_id + '_72X72.jpeg'"/>
                <div class="intro">
                  <p class="name">{{shopInfo.shop_name}}</p>
                  <p class="desc">{{shopInfo.shop_tags}}</p>
                </div>
                <a :href="'#/shop/id/' + shopInfo.shop_id" class="go vux-1px">查看店铺</a>
              </div>
              <div class="shop-detail">
                <!--<div class="item vux-1px-b">
                                    <span class="txt left">开拍时间</span>
                                    <span class="time right">{{startTime}}</span>
                                </div>
                                <div class="item vux-1px-b">
                                    <span class="txt left">结拍时间</span>
                                    <span class="time right">{{endTime}}</span>
                                </div>-->
                <div class="item vux-1px-b">
                  <span class="txt">拍品详情</span>
                  <div class="show" v-html="goods_content"></div>
                </div>
                <!-- -->
                <div class="item vux-1px-b"
                     v-if="goodsDetail.appraisal_from  == 'other' && goodsDetail.appraisal_img != ''">
                  <span class="certTitle">【 第三方证书本平台不保证真假 】</span>
                  <img :src="'/los' + goodsDetail.appraisal_img" alt=""/>
                </div>
                <div class="item vux-1px-b"
                     v-if="goodsDetail.appraisal_from  == 'appraisal_site' && goodsDetail.appraisal_number != ''">
                  <span class="certTitle" style="text-align: left;">【 官方证书编号:{{goodsDetail.appraisal_number}}】</span>
                </div>
              </div>
              <div class="show-foot">
                <flexbox :gutter="0">
                  <flexbox-item :span="6" class="tools-item address">
                    <i class="pm-icon icon-address"></i>
                    <span v-if="shopInfo.market_name == '' ||shopInfo.market_name == null">暂无</span>
                    <span v-else>{{shopInfo.market_name}}{{shopInfo.shop_address}}</span>
                  </flexbox-item>

                  <flexbox-item class="tools-item other">
                    <a href="javascript:;">
                      <span class="count">{{shopDetail.auction_vcount}}</span>
                      <i class="pm-icon icon-eye"></i>
                    </a>
                  </flexbox-item>
                  <flexbox-item class="tools-item other">
                    <a href="javascript:;" v-if="shopDetail.like_state == 1">
                      <i @click="goodsLike()" class="pm-icon icon-like_on"></i>
                      <span class="like">{{shopDetail.auction_vlike}}</span>
                    </a>
                    <a href="javascript:;" v-else>
                      <i @click="goodsLike()" class="pm-icon icon-like"></i>
                      <span class="like">{{shopDetail.auction_vlike}}</span>
                    </a>
                  </flexbox-item>
                  <flexbox-item class="tools-item other">
                    <a :href="'#/Complain/auction_id/' +shopDetail.auction_id">
                      <i class="pm-icon icon-tousu"></i>
                      <span style="font-size: 0.32rem;">投诉</span></a>
                  </flexbox-item>
                </flexbox>
              </div>
            </div>
          </div>

          <!--保证金须知-->
          <div class="instrustion">
            <div class="title">
              <img src="../../assets/images/home/icon_progress.png" alt=""/>
              <h2>保证金须知</h2>
              <i class="re-icon icon-right"></i>
            </div>
            <div class="notice">
              <img class="circle" src="../../assets/images/home/icon_circle.png" alt=""/>
              <div class="wrap">
                <div class="titles">点击"出价"缴纳保证金</div>
                <div class="content">缴纳保证金后，即可出价参与竞拍（注：免保证金拍品可直接出价竞拍）</div>
              </div>
              <img class="circle" src="../../assets/images/home/icon_circle.png" alt=""/>
              <div class="wrap">
                <div class="titles">保证金释放规则</div>
                <div class="content">
                  1、竞拍成功者，在截拍后72h内支付货款后，保证金会原路退回到买家账户；<br/> 2、未竞拍成功（出局者），拍品截拍后，保证金将立即原路退回至买家账户
                </div>
              </div>
              <img class="circle" src="../../assets/images/home/icon_circle.png" alt=""/>
              <div class="wrap">
                <div class="titles">保证金扣除规则</div>
                <div class="content" style="margin-bottom: 0;">
                  1、竞拍成功者，在截拍后72h内未支付拍品货款，交易自动关闭后，将扣除保证金赔付给卖家。<br/>
                  2、若买家竞拍成功后并在规定时间内支付货款，商家由于个人原因，在3个工作日内未正常发货，交易自动关闭后，好文玩将退还买家所支付款项，并扣除商家保证金赔付给买家。
                </div>
              </div>
            </div>
          </div>
          <!--店铺相关拍品-->
          <div class="shopWrap">
            <h2 class="recShop">为您推荐</h2>
            <div class="selling">
              <ul v-if="infoList == ''">
                <div class="no-data">
                  <img src="../../assets/images/home/nodata.png"/>
                </div>
              </ul>
              <ul v-else>
                <li v-for="(item,index) in infoList">
                  <!-- @click.native="flushCom" -->
                  <router-link :to="'/Detail/id/' + item.auction_id">
                    <img class="list_bg" :src="'/los/uploads/thumb/goods/' + item.goods_id  + '_380X244.jpeg'" alt=""/>
                    <div class="Info">
                      <span v-if="item.auction_starttime > curTime">预展中</span>
                      <span v-else-if="item.auction_endtime < curTime">已结束</span>
                      <span v-else>拍卖中</span>
                      <p>
                        <count-down v-if="cache" :currentTime="curTime" :startTime="item.auction_starttime"
                                    :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'"
                                    :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'">
                        </count-down>
                      </p>
                    </div>
                    <div class="desc">
                      <p class="title">{{item.goods_name}}</p>
                      <p class="price"><span>当前价</span><b>￥{{item.auction_bidprice}}</b></p>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </view-box>
      <div class="offer-box" v-if="shopDetail.auction_state != 0">
        <div class="tool vux-1px-r">
          <ul>
            <li class="concern" @click="shopConcern" v-if="shopInfo.follow_state == 0">
              <i class="tp-icon icon-focus"></i>
              <p>关注</p>
            </li>
            <li class="concern" @click="shopConcern" v-else>
              <i class="tp-icon icon-focus-on"></i>
              <p style="color: #a30000;">已关注</p>
            </li>
            <router-link :to="'/shop/id/' + shopInfo.shop_id ">
              <li>
                <i class="tp-icon icon-store"></i>
                <p>店铺</p>
              </li>
            </router-link>
          </ul>
        </div>
        <div class="calculator">
          <x-number width="2.4rem" :value="value" :step="parseInt(shopDetail.auction_step)" :max="parseInt(maxPrice)"
                    :min="parseInt(value)">{{value}}
          </x-number>
        </div>
        <div class="pay onerror"
             v-if="shopDetail.auction_endtime - cur_time < 0 || shopDetail.auction_starttime - cur_time > 0 ">出 价
        </div>
        <!--<div class="pay" @click="offer()" v-else-if="signup == 0 && shopDetail.auction_deposit != 0">出 价</div>-->
        <div class="pay" @click="payClick()">出 价</div>
      </div>
      <!--分享图片显示-->
      <x-dialog v-model="shareQrcode" class="qrcode-wrap" @on-hide="closeAlert()" hide-on-blur>
        <img :src="'/los' + shareImg" alt=""/>
      </x-dialog>
      <!--出价-->
      <popup v-model="show">
        <div class="my-popup">
          <div class="title" id="title" v-model="title">{{title}}<span class="right close" @click="close"></span></div>
          <div class="body" id="body">
            <ul class="list">
              <li>
                <span class="left">保证金</span>
                <span class="right my-txt-color1" v-model="deposit">￥{{shopDetail.auction_deposit}}</span>
              </li>
              <li>
                <span class="left">支付方式</span>
                <span class="right" v-model="payaway">{{payaway}}</span>
              </li>
            </ul>
            <div class="other">
              <p>若竞拍不成功，结拍后保证金将立即退回</p>
              <a href="javascript:;" @click="PayDeposit()" class="my-button">确认支付保证金</a>
            </div>
          </div>
        </div>
      </popup>
      <!--分享-->
      <popup v-model="show2" style="height: 2.6rem;background: #fff;">
        <div class="share-list">
          <div class="body">
            <ul>
              <li @click="qrcode()">
                <i class="fx-icon icon-qrcode"></i>
                <p class="name">二维码</p>
              </li>
              <li @click="copy()" class="tag-read" :data-clipboard-text="ShareLink">
                <i class="fx-icon icon-link"></i>
                <p class="name">复制链接</p>
              </li>
              <li>
                <i class="fx-icon icon-more"></i>
                <p class="name">点击右上角</p>
              </li>
            </ul>
          </div>
        </div>
      </popup>
      <!--手机号验证-->
      <x-dialog v-model="sms_codes" class="dialog-demo getSms" @on-hide="closeAlert()" hide-on-blur>
        <div style="background: #fff;">
          <div class="checkTitle">
            <p>请输入您的手机号</p>
          </div>
          <div class="uploadTel">
            <b>+86</b>
            <input v-model="mobile" type="number" placeholder="请输入手机号"/>
          </div>
          <div class="sms">
            <input type="number" v-model="sms_code" placeholder="请输入验证码"/>
            <span @click="verify()">{{btntxt}}</span>
          </div>
          <button @click="submitTel">提交</button>
        </div>
      </x-dialog>
      <toast v-model="success" type="text" width="2.8rem">{{msg}}</toast>
      <toast v-model="cancel" type="text" width="6.4rem">{{msg}}</toast>
    </div>
  </div>
</template>

<script>
import bottom from '../comp/Footer'
import $ from 'jquery'
import CountDown from 'vue2-countdown';
import wx from 'weixin-js-sdk';
import BScroll from 'better-scroll';
import { goodsInfo } from '@/api/service'
//复制链接
import Clipboard from 'clipboard';
import {
  XHeader,
  Grid,
  GridItem,
  Swiper,
  SwiperItem,
  Card,
  Scroller,
  Flexbox,
  FlexboxItem,
  XNumber,
  ViewBox,
  Previewer,
  Popup,
  Toast,
  Loading,
  XDialog
} from 'vux'

export default {
  data() {
    return {
      imgindex: 1,
      value: '',
      show: false,
      show2: false,
      fullName: '',
      title: '请先缴纳保证金',
      deposit: '',
      payaway: '微信支付',
      bidding_list: [],
      text: '加载中',
      success: false,
      msg: '',
      shopDetail: '',
      goodsDetail: '',
      biddingUrls: '',
      shopInfo: '',
      cur_time: '',
      shop_id: '',
      startTime: '',
      endTime: '',
      curTime: '',
      signup: '',
      cache: true,
      cancel: false,
      shareQrcode: false,
      imgLists: [
        { msrc: './static/data/shop/img/goods_img004.jpg' },
        { msrc: './static/data/shop/img/goods_img004_2.jpg' },
        { msrc: './static/data/shop/img/goods_img004_3.jpg' },
        { msrc: './static/data/shop/img/goods_img004_4.jpg' },
        { msrc: './static/data/shop/img/goods_img004_5.jpg' }
      ],
      Concern: '',
      show1: false,
      shop_logo: '',
      bid_price: '',
      infoList: [],
      maxPrice: '',
      auction_url: '',
      short_url: '',
      ShareLink: '',
      goods_content: '',
      shareImg: '',
      member_id: '',
      shareUrl: '',
      mobile: '',
      sms_code: '',
      sms_codes: false,
      btntxt: '获取验证码',
      userInfo: '',
      times: 0,
      deleted: false,
    }
  },
  components: {
    XHeader,
    Grid,
    GridItem,
    Swiper,
    SwiperItem,
    CountDown,
    Card,
    Scroller,
    Flexbox,
    FlexboxItem,
    BScroll,
    XNumber,
    ViewBox,
    Previewer,
    Popup,
    Toast,
    Loading,
    XDialog
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fullName = from.name;
    })
  },
  watch: {
    '$route': function (to, from) {
      this.getGoodsDetail();
      window.parent.scrollTo(0, 0);
    }
  },
  mounted() {
    this.getGoodsDetail();
    // this.getPersonInfo();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'ShopPage') {
      to.meta.keepAlive = false;
    }
    if (to.name == 'Home') {
      to.meta.keepAlive = true;
    }
    next();
  },
  methods: {
    shareClick: function () {
      this.show2 = !this.show2;
    },
    qrcode: function () {
      this.show1 = true;
      let auction_id = this.$route.params.id;
      this.member_id = window.sessionStorage.getItem('member_id');
      console.log(this.member_id);
      if (window.location.href.indexOf('inviter') != -1) {
        var share_url = window.location.href
      } else {
        var share_url = window.location.href + '?/inviter/' + this.member_id;
      }
      var params = {
        auction_id: auction_id,
        share_url: share_url,
      }
      this.$http({
        method: 'POST',
        url: '/los/api/auction/share_pic.json',
        data: params
      }).then((result) => {
        if (result.data.code == 1) {
          this.show2 = false;
          this.shareImg = result.data.data.share_img_src;
          this.shareQrcode = true;
          this.show1 = false;
        }
      }).catch((err) => {

      })
    },
    getGoodsDetail() {
      window.parent.scrollTo(0, 0);
      this.show1 = true;
      let id = this.$route.params.id;
      this.ShareLink = 'http://pm.haowenwan.com/dist/#/Detail/id/' + id;
      goodsInfo().then(result => {
        this.shopDetail = result.rows
        this.cur_time = result.rows.cur_time
        console.log(this.shopDetail);
      })
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/auction/details.json?auction_id=' + id,
      //   data: ''
      // }).then((result) => {
      //   if (this.fullName == 'Upload') {
      //     this.shareClick();
      //   }
      //   if (result.data.auction.auction_state == 1 && result.data.auction.bidding_count > 0 && result.data.cur_time > result.data.auction.auction_endtime) {
      //     this.countDownE_cb(result.data.auction.auction_id);
      //   } else if (result.data.auction.auction_state == 2 && result.data.auction.auction_endtime + 259200 > result.data.cur_time) {
      //     let auction_id = result.data.auction.auction_id;
      //     let params = {
      //       auction_id: auction_id
      //     }
      //     this.$http({
      //       method: 'POST',
      //       url: '/los/api/auction/order_notice.json',
      //       data: params
      //     }).then((result) => {
      //       console.log(result);
      //     }).catch((err) => {
      //       console.log(err);
      //     })
      //   }
//       this.getvisitInfo();
//       this.cache = false;
//       this.show1 = false;
//       this.shopDetail = result.data.auction;
//       if (this.shopDetail.auction_deposit == 0) {
//         $('.main .body').css('margin-top', '0');
//       }
//       this.cur_time = result.data.cur_time;
//       this.goodsDetail = result.data.goods;
//       this.goods_content = this.goodsDetail.goods_content;
//       this.shop_id = this.goodsDetail.shop_id;
//       this.bidding_list = result.data.bidding_list;
//       this.getShopInfo(this.shop_id);
//       this.signup = result.data.signup_state;
//       this.value = parseInt(result.data.bidding_price);
//       this.maxPrice = (Number(this.shopDetail.auction_startprice) + Number(this.shopDetail.auction_bidprice) + Number(this.shopDetail.auction_step)) * 3;
//       this.imgLists = result.data.goods_imgs;
//       this.getWXShare();
//       this.VisitNum();
//       //达人推荐横向滚动
//       this.$nextTick(() => {
//         this.getAuctionList();
//         this.cache = true;
//         this.scroll = new BScroll('.body .list', {
//           scrollX: true,
//           eventPassthrough: 'vertical'
//         });
//         $('#box').width(this.calwidth());
//       });
//       if (result.data.code == 0) {
//         this.deleted = true
//       }
//     }
// ).catch((err) => {
//   console.log(err);
// })
},
//获取店铺信息
getShopInfo: function (shop_id) {
  this.$http({
    method: 'GET',
    url: '/los/api/shop/details.json?shop_id=' + shop_id,
    data: ''
  }).then((result) => {
    this.shopInfo = result.data.data;
  }).catch((err) => {
    console.log(err);
  })
}
,
getvisitInfo: function () {
  let auction_id = this.$route.params.id;
  var params = {
    auction_id: auction_id
  }
  this.$http({
    method: 'POST',
    url: '/los/api/auction/visit.json',
    data: params
  }).then((result) => {
  }).catch((err) => {
    console.log(err);
  })
}
,

//点击出价付款
payClick: function () {
  let auction_id = this.$route.params.id;
  this.biddingUrls = '/los/api/buyer/auction_bidding.json'
  var price = $('.calculator').find('input').val();
  var bidPrice = {
    auction_id: auction_id,
    bidding_price: price
  }
  this.$http({
    method: 'POST',
    url: '/los/api/buyer/auction_signup.json',
    data: {
      auction_id: auction_id
    }
  }).then((rst) => {
    if (rst.data.data.auction_signup.signup_state == 1) {
      this.$http({
        method: 'POST',
        url: this.biddingUrls,
        data: bidPrice
      }).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.bidding_list.unshift(result.data.data);
          this.$nextTick(() => {
            $('#box').width(this.calwidth());
            this.getGoodsDetail();
          });
          this.success = !this.success;
          this.msg = result.data.msg;
        } else if (result.data.code == 0) {
          this.cancel = !this.cancel;
          this.msg = result.data.msg;
        }
      }).catch((err) => {
        console.log(err);
      })
    } else if (rst.data.data.auction_signup.pay_state == 0 && rst.data.data.auction_signup.signup_fee > 0) {
      this.offer();
    }
  }).catch((err) => {

  })
}
,
//缴纳保证金
PayDeposit: function () {
  let auction_id = this.$route.params.id;
  var params = {
    auction_id: auction_id
  }
  this.$http({
    method: 'POST',
    url: '/los/api/buyer/auction_signup.json',
    data: params
  }).then((result) => {
    console.log(result);
    this.shopInfo = result.data.data;
    this.show1 = false;
    if (result.data.code == 1) {
      this.$http({
        method: 'POST',
        url: '/los' + result.data.url,
        data: ''
      }).then((rst) => {
        if (rst.data.code == 1) {
          location.href = '#/PaymentPage/id/' + rst.data.data.pay_sn;
        }
      }).catch((err) => {
        console.log(err);
      })
    } else {
      this.cancel = !this.cancel;
      this.msg = result.data.msg;
    }
  }).catch((err) => {
    console.log(err);
  })
}
,
//店铺浏览量
VisitNum: function () {
  this.$http({
    method: 'GET',
    url: '/los/api/shop/visiting.json?shop_id=' + this.shop_id,
    data: ''
  }).then((result) => {

  }).catch((err) => {
    console.log(err);
  })
}
,
//点击店铺关注
shopConcern: function () {
  this.$http({
    method: 'POST',
    url: '/los/api/shop/follow.json?shop_id=' + this.shop_id,
    data: ''
  }).then((result) => {
    console.log(result);
    this.$nextTick(() => {
      this.getGoodsDetail();
    })
    this.success = !this.success;
    this.msg = result.data.msg;
  }).catch((err) => {
    console.log(err);
  })
}
,
//点击商品喜欢
goodsLike: function () {
  let auction_id = this.$route.params.id;
  this.$http({
    method: 'POST',
    url: '/los/api/auction/like.json?auction_id=' + auction_id,
    data: ''
  }).then((result) => {
    console.log(result);
    this.success = !this.success;
    this.msg = result.data.msg;
    this.$nextTick(() => {
      this.getGoodsDetail();
    });
  })
}
,
shareCallback: function (share_method, share_url) {
  let auction_id = this.$route.params.id;
  var params = {
    auction_id: auction_id,
    share_url: share_url,
    share_method: share_method
  }
  this.$http({
    method: 'POST',
    url: '/los/api/auction/share.json',
    data: params
  }).then((result) => {

  }).catch((err) => {

  });
}
,

//微信分享
getWXShare: function () {
  let _this = this;
  let auction_id = this.$route.params.id;
  let urls = window.location.href;
  var ua = navigator.userAgent.toLowerCase();
  if (/iphone|ipad|ipod/.test(ua)) {
    if (urls.indexOf("?") != -1) {
      this.shareUrl = window.location.href;
    } else {
      this.shareUrl = 'http://pm.haowenwan.com/dist/#/';
    }
  } else if (/android/.test(ua)) {
    this.shareUrl = urls;
  }
  var params = {
    url: this.shareUrl,
  }
  this.$http({
    method: 'POST',
    url: '/los/api/oauth/script',
    data: params,
  }).then((result) => {
    if (result) {
      wx.config({
        debug: result.data.debug,
        appId: result.data.appId,
        timestamp: result.data.timestamp,
        nonceStr: result.data.nonceStr,
        signature: result.data.signature,
        jsApiList: result.data.jsApiList,
      });
      wx.ready(function () {
        wx.onMenuShareAppMessage({
          title: _this.goodsDetail.goods_name, // 分享标题
          desc: _this.goodsDetail.goods_content.replace(/<[^>]+>/g, ""), // 分享描述
          link: urls, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://pm.haowenwan.com' + _this.goodsDetail.goods_thumb, // 分享图标
          type: 'link', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function (res) {
            _this.shareCallback('ShareAppMessage', urls)
          },
          cancel: function (err) {
            // 用户取消分享后执行的回调函数
          }
        });
        //分享朋友圈
        wx.onMenuShareTimeline({
          title: _this.goodsDetail.goods_name + '\n' + _this.goodsDetail.goods_content.replace(/<[^>]+>/g, ""), // 分享标题
          link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://pm.haowenwan.com' + _this.goodsDetail.goods_thumb, // 分享图标
          success: function () {
            _this.shareCallback('ShareTimeline', urls)
            // 用户点击了分享后执行的回调函数
          },
        });
        wx.error(function (res) {
        });
      })
    } else {
      alert('获取信息失败 请重新尝试');
    }
  }).catch((err) => {
    console.log(err);
  })
}
,

//获取店铺内商品列表
getAuctionList: function () {
  this.$http({
    method: 'GET',
    url: '/los/api/shop/auction_list.json?shop_id=' + this.shop_id + '&ts=2',
    data: ''
  }).then((result) => {
    this.cache = false;
    this.$nextTick(() => {
      this.cache = true;
      this.infoList = result.data.data.slice(0, 6);
      this.curTime = result.data.cur_time;
      if (this.infoList == '') {
        this.$http({
          method: 'GET',
          url: '/los/api/index/auction_list.json?ts=2',
          data: ''
        }).then((result) => {
          this.infoList = result.data.data.slice(0, 6);
          this.curTime = result.data.cur_time;
        }).catch((err) => {
        })
      }
    })

  }).catch((err) => {
    console.log(err);
  })
}
,
signupRefund: function (auction_id) {
  this.$http({
    method: 'POST',
    url: '/los/api/auction/signup_refund.json?auction_id=' + auction_id,
    data: ''
  }).then((result) => {
    console.log(result);
  }).catch((err) => {
    console.log(err);
  })
}
,
//时间结束 执行回调
countDownE_cb: function (auction_id) {
  this.$http({
    method: 'POST',
    url: '/los/api/auction/order_auto/?auction_id=' + auction_id,
    data: ''
  }).then((result) => {
    console.log(result);
    //回调成功 将消息发送至服务器
    if (result.data.code == 1) {
      let order_sn = result.data.data.auction_order.order_sn;
      let params = {
        order_sn: order_sn
      }
      this.$http({
        method: 'POST',
        url: '/los/api/auction/order_notice.json',
        data: params
      }).then((result) => {
        console.log(result);
      }).catch((err) => {
        console.log(err);
      })
    }
  }).catch((err) => {
    console.log(err);
  })
}
,
//获取个人资料
getPersonInfo: function () {
  this.$http({
    method: 'GET',
    url: '/los/api/member/info.json',
    data: ''
  }).then((result) => {
    this.userInfo = result.data.data;
  }).catch((err) => {
    console.log(err);
  })
}
,
//手机验证码部分
timer: function () {
  if (this.times > 0) {
    this.times--;
    this.btntxt = this.times + "s后重新获取";
    setTimeout(this.timer, 1000);
    this.disabled = true;
  } else {
    this.times = 0;
    this.btntxt = "点击获取";
    this.disabled = false;
  }
}
,
//点击获取验证码
verify: function () {
  var reg1 = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
  if (this.times > 0) {
    return
  } else if (this.mobile == '') {
    this.success = !this.success;
    this.msg = '手机号不为空';
  } else if (!reg1.test(this.mobile)) {
    this.success = !this.success;
    this.msg = '手机号不合法';
  } else {
    this.times = 60;
    this.timer();
    let params = {
      tel: this.mobile
    };
    this.$http({
      method: 'POST',
      url: '/los/api/member/sms_verify.json',
      data: params
    }).then((result) => {
      this.success = !this.success;
      this.msg = result.data.msg;
    }).catch((err) => {
      console.log(err);
    })
  }
}
,
submitTel: function () {
  let params = {
    member_mobile: this.mobile,
    sms_code: this.sms_code,
  }
  if (this.mobile == '') {
    this.success = !this.success;
    this.msg = '手机号不为空';
  } else if (this.sms_code == '') {
    this.success = !this.success;
    this.msg = '请填写验证码';
  } else {
    this.$http({
      method: 'POST',
      url: '/los/api/member/mobile_bind.json',
      data: params
    }).then((result) => {
      if (result.data.code == 1) {
        this.cancel = !this.cancel;
        this.msg = result.data.msg;
        this.sms_codes = false;
        this.$nextTick(() => {
          this.getPersonInfo();
        })
      } else {
        this.cancel = !this.cancel;
        this.msg = result.data.msg;

      }
    }).catch((err) => {
      console.log(err);
    })
  }
}
,
closeAlerts: function () {
  $('#fade').hide();
  $('#light').hide();
  $('body').css('overflow', 'auto');
}
,

//复制链接分享
copy()
{
  var _this = this;
  var clipboard = new Clipboard('.tag-read');
  clipboard.on('success', function (e) {
    _this.success = !_this.success;
    _this.msg = '复制成功';
  })
  clipboard.on('error', e => {
    _this.success = !_this.success;
    _this.msg = '该浏览器不支持自动复制';
    clipboard.destroy();
  })
}
,
//点击出现详情图
getphoto(index)
{
  this.$refs.previewer.show(index);
}
,
//小图标轮播图切换
indexChange(index)
{
  this.imgindex = index + 1;
}
,
//计算出价记录部分宽度
calwidth()
{
  var width = 0;
  $('.body .list .box .item').each(function () {
    var _this = this;
    width += $(_this).outerWidth(true);
  });
  return width;
}
,
//取消出价
close()
{
  this.show = false;
}
,
offer: function () {
  if (this.userInfo.member_mobile != '') {
    this.show = true;
  } else {
    this.sms_codes = true;
    $('body').css('overflow', 'hidden');
  }
}
,
closeAlert: function () {
  $('body').css('overflow', 'auto');
}
,
back: function () {
  window.history.go(-1);
}
,
}
}
</script>

<style scoped>
  /*#Detail {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }*/

  .nofind {
    width: 100%;
    margin: 1.33rem auto;
    text-align: center;
  }

  .delete {
    width: 100%;
    font-size: 0.4rem;
    color: #777;
    margin-top: 0.26rem;
  }

  /*竞拍流程*/

  .progress {
    width: 100%;
    margin-top: 0.26rem;
    background: #fff;
    padding: 0 0.26rem;
  }

  .progress .title,
  .instrustion .title {
    height: 1.17rem;
    position: relative;
    overflow: hidden;
  }

  .progress .title img,
  .instrustion .title img {
    float: left;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.37rem;
    margin-right: 0.26rem;
  }

  .progress .title h2,
  .instrustion .title h2 {
    float: left;
    color: #333;
    font-size: 0.4rem;
    line-height: 1.17rem;
  }

  .progress .title i,
  .instrustion .title i {
    margin: 0.38666rem 0;
    float: right;
  }

  .progress .title:after,
  .instrustion .title:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .progress .desc {
    font-size: 0.33rem;
    color: #777;
    width: 100%;
    margin-top: 0.21rem;
  }

  .progress .desc span {
    margin-right: 0.7rem;
    text-align: center;
  }

  .progress .desc span:last-child {
    margin-right: 0;
  }

  .progress .imgs {
    padding: 0.5rem 0;
    width: 100%;
    overflow: hidden;
  }

  .progress .imgs .imgWrap {
    width: 100%;
    height: 0.88rem;
    padding: 0 0.18rem;
  }

  .progress .imgs .icon {
    width: 0.24rem;
    height: 0.38rem;
    margin-top: 0.26rem;
  }

  .progress .imgs img {
    float: left;
    width: 0.88rem;
    height: 0.88rem;
    margin-right: 0.46rem;
  }

  .progress .imgs img:last-child {
    margin-right: 0;
  }

  .instrustion {
    width: 100%;
    margin: 0.26rem 0;
    background: #fff;
    padding: 0 0.26rem;
    position: relative;
  }

  .instrustion .notice {
    overflow: hidden;
    padding: 0.53rem 0;
    position: relative;
  }

  .instrustion .notice .circle {
    float: left;
    width: 0.18rem;
    height: 0.18rem;
    margin-top: 0.13rem;
  }

  .instrustion .notice i {
    display: inline-block;
    width: 0.21rem;
    height: 0.21rem;
    border: solid 1px #a30000;
    float: left;
    border-radius: 50%;
    margin-top: 0.12rem;
    /*z-index: 999;*/
  }

  .instrustion .notice .wrap {
    margin-left: 0.29rem;
    position: relative;
  }

  .instrustion .notice .titles {
    font-size: 0.37rem;
    color: #5e5e5e;
    margin-bottom: 0.26rem;
  }

  .instrustion .notice .content {
    font-size: 0.37rem;
    color: #aaa;
    margin-bottom: 0.4rem;
    line-height: 0.56rem;
  }

  [v-cloak] {
    display: none;
  }

  /*分享*/

  .share-list {
    height: 100%;
    padding: 0.26rem;
  }

  .share-list ul {
    overflow: hidden;
  }

  .share-list ul li {
    float: left;
    width: 33.33%;
    text-align: center;
  }

  .share-list ul li p {
    margin-top: 0.2rem;
  }

  #light b {
    font-size: 0.4rem;
    line-height: 0.4rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin: 0.26rem 0 0.37rem 0;
    display: block;
  }

  #light {
    overflow: hidden;
  }

  #light .proInfo {
    font-size: 0.37rem;
    line-height: 0.5rem;
    padding: 0.26rem;
  }

  #light img {
    padding: 0.26rem;
    width: 100%;
    height: 100%;
  }

  .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1001;
    overflow: hidden;
  }

  .white_content {
    display: none;
    position: absolute;
    top: 1.2rem;
    left: 0.64rem;
    height: 13.44rem;
    width: 8.77rem;
    margin: 0 auto;
    border-radius: 0.13rem;
    z-index: 1002;
    overflow: auto;
  }

  .nextPage {
    width: 8.56rem;
    height: 1.3rem;
    left: 0.72rem;
    background: #a30000;
    color: #fff;
    line-height: 1.3rem;
    text-align: center;
    border-radius: 0.05rem;
    font-size: 0.4rem;
    margin: 2rem auto 0.4rem;
  }

  .white_content .close {
    background: #a30000;
    height: 1rem;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 0.4rem;
    line-height: 1rem;
    text-align: center;
  }

  .qrcode-wrap img {
    width: 100%;
    height: 100%;
  }

  /*返回键按钮*/

  .button {
    position: fixed;
    right: 0.4rem;
    bottom: 2.37rem;
    z-index: 999;
  }

  .button img {
    width: 1.6rem;
    height: 1.6rem;
  }

  /*列表为空*/

  .main {
    position: relative;
  }

  .bcontent {
    position: relative;
  }

  .bcontent .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
  }

  .dec {
    width: 0.85rem;
    height: 0.85rem;
    background-size: 100% 100%;
    background-position: 0 0;
    display: inline-block;
  }

  .no-data {
    width: 2.96rem;
    height: 2.96rem;
    margin: 1rem auto;
  }

  .no-data img {
    width: 100%;
  }

  .header {
    background-color: transparent !important;
  }

  .main .top {
    background-color: #fff;
  }

  .main .body {
    margin: 0.26rem 0;
  }

  .main .imglist {
    position: relative;
  }

  .main .imglist .endtime {
    position: absolute;
    bottom: 0;
    padding: 0 0.26666rem;
    width: 100%;
    height: 1.17333rem;
    line-height: 1.25333rem;
    font-size: 0.34666rem;
    color: #fff;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
    overflow: hidden;
  }

  .main .imglist .endtime i.icon-time {
    margin-top: 0.4rem;
    float: left;
    margin-right: 0.21333rem;
  }

  .main .imglist .endtime .count {
    float: right;
    margin: 0.18666rem 0;
    width: 0.8rem;
    height: 0.8rem;
    line-height: 0.85333rem;
    text-align: center;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%;
  }

  .main .info {
    position: relative;
    padding: 0 0.26666rem;
  }

  .main .info .name {
    font-size: 0.42666rem;
    overflow: hidden;
    margin: 0.42rem 0;
    width: 80%;
    white-space: nowrap;
  }

  .main .info .price {
    padding-bottom: 0.61333rem;
    line-height: 1.1;
    overflow: hidden;
    margin-top: 0.45rem;
  }

  .main .info .price .current-price {
    float: left;
  }

  .main .info .price .current-price .txt {
    position: relative;
    float: left;
    margin-right: 0.4rem;
    font-size: 0.37333rem;
    color: #da4240;
  }

  .main .info .price .current-price .txt:after {
    content: 'RMB';
    position: absolute;
    top: 0.4rem;
    left: 0;
    letter-spacing: 0.18666rem;
    font-size: 0.34666rem;
    color: #ffc1c0;
  }

  .main .info .price .current-price span {
    font-size: 0.66666rem;
    color: #DA4240;
  }

  .main .info .price .current-price .yuan {
    font-size: 0.32rem;
    color: #da4240;
  }

  .main .info .price .val-price {
    float: left;
    position: relative;
    margin-left: 1.46666rem;
    padding-top: 0.16rem;
    font-size: 0.37333rem;
    color: #aaa;
  }

  .main .info .price .val-price:after {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #aaa;
  }

  .main .price-box {
    position: relative;
  }

  .main .price-box .weui-panel:before {
    border: none;
  }

  .main .price-box .card-price-flex {
    display: flex;
    padding-bottom: 0.48rem;
  }

  .main .price-box .card-price-flex > div {
    flex: 1;
    text-align: center;
    font-size: 0.32rem;
    color: #aaa;
  }

  .main .price-box .card-price-flex span {
    color: #333;
    font-size: 0.37333rem;
  }

  .main .price-box .card-price-flex p {
    padding-top: 0.13333rem;
  }

  .main .price-box .card-price-flex .vux-1px-r:after {
    top: 0.21333rem;
    height: 0.58666rem;
    border-color: #e6e6e6;
  }

  .nodata {
    font-size: 0.32rem;
    color: #aaa;
    margin-left: 0.5rem;
  }

  .main .info .state {
    position: absolute;
    right: 0.26666rem;
    top: 0;
    color: #DA4240;
    font-size: 0.37333rem;
  }

  .main .info .state i {
    float: left;
    margin-top: 0.06666rem;
    margin-right: 0.16rem;
  }

  .main .safe ul {
    overflow: hidden;
    padding: 0 0.26666rem;
  }

  .main .safe ul li {
    float: left;
    margin-right: 0.66666rem;
    height: 1.17333rem;
    line-height: 1.22666rem;
    color: #DA4240;
  }

  .main .safe ul li i {
    float: left;
    margin-top: 0.34666rem;
    margin-right: 0.16rem;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  .body .record {
    background: #fff;
  }

  .body .record h5 {
    position: relative;
    padding: 0 0.26666rem;
    height: 1.17333rem;
    line-height: 1.22666rem;
    overflow: hidden;
    font-size: 0.4rem;
  }

  .body .record h5 i.icon-record {
    margin-right: 0.18666rem;
  }

  .body .record h5 span {
    color: #aaa;
    font-size: 0.34666rem;
  }

  .body .record h5 i.icon-right {
    margin: 0.38666rem 0;
    float: right;
  }

  .body .record h5:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .body .record .list {
    padding: 0.34666rem 0.26666rem;
    overflow: hidden;
  }

  .body .record .list .box {
    position: relative;
    width: 200%;
  }

  .body .record .list .item {
    position: relative;
    float: left;
    margin-right: 0.58666rem;
    width: 2.24rem;
    text-align: center;
  }

  .body .record .list .item:after {
    content: '';
    position: absolute;
    top: 0.29333rem;
    right: -0.58666rem;
    width: 0.58666rem;
    border-top: dashed 1px #CCCCCC;
  }

  .body .record .list .item:first-child:after {
    border-color: #DA4240;
  }

  .body .record .list .item:last-child:after {
    border: none;
  }

  .body .record .list .item .item-box {
    border: solid 1px #e6e6e6;
    border-top: none;
  }

  .body .record .list .item .rank {
    height: 0.58666rem;
    color: #fff;
    font-size: 0.32rem;
    line-height: 0.64rem;
    background-color: #c2c2c2;
    border-top-left-radius: 0.05333rem;
    border-top-right-radius: 0.05333rem;
  }

  .body .record .list .item .rank.active {
    background-color: #DA4240;
  }

  .body .record .list .item img {
    margin-top: 0.18666rem;
    margin-bottom: 0.24rem;
    width: 0.90666rem;
    height: 0.90666rem;
    border-radius: 50%;
  }

  .body .record .list .item .name {
    margin-bottom: 0.37333rem;
    font-size: 0.34666rem;
    color: #aaa;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .body .record .list .item .price {
    margin-bottom: 0.4rem;
    line-height: 1;
    color: #DA4240;
    font-size: 0.37333rem;
  }

  .body .shop {
    background: #fff;
  }

  .body .shop .shop-title {
    padding: 0.26666rem;
    background-color: #303030;
    overflow: hidden;
  }

  .body .shop .shop-title img {
    float: left;
    width: 0.98666rem;
    height: 0.98666rem;
    border-radius: 0.05333rem;
  }

  .body .shop .shop-title .intro {
    font-size: 0;
    margin-left: 0.29333rem;
    padding-left: 0.29333rem;
    color: #fff;
    display: inline-block;
    width: 65%;
    overflow: hidden;
  }

  .body .shop .shop-title .intro .name {
    padding-top: 0.08rem;
    font-size: 0.4rem;
    line-height: 1;
    padding-bottom: 0.16rem;
  }

  .body .shop .shop-title .intro .desc {
    font-size: 0.29333rem;
    line-height: 1;
    text-overflow: hidden;
    white-space: nowrap;
    color: rgba(255, 255, 255, .5);
  }

  .body .shop .shop-title .go {
    float: right;
    margin-top: 0.13rem;
    width: 1.86666rem;
    height: 0.56rem;
    line-height: 0.64rem;
    text-align: center;
    color: #fff;
    font-size: 0.34666rem;
  }

  .body .shop .shop-title .go.vux-1px:before {
    border-radius: 0.10666rem;
  }

  .body .shop .shop-detail {
    padding: 0 0.26666rem;
  }

  .body .shop .shop-detail .item {
    padding: 0.46666rem 0;
    overflow: hidden;
    line-height: 1;
  }

  .body .shop .shop-detail .item .certTitle {
    width: 100%;
    display: block;
    line-height: 0.52rem;
    text-align: center;
    font-size: 0.34rem;
    color: #777;
    margin-bottom: 0.26rem;
  }

  .body .shop .shop-detail .item img {
    width: 100%;
    height: 6.21rem;
  }

  .body .shop .shop-detail .item .txt {
    font-size: 0.4rem;
  }

  .body .shop .shop-detail .item .time {
    padding: 0.05333rem 0;
    font-size: 0.34666rem;
    color: #777;
    display: inline-block;
  }

  .body .shop .shop-detail .item .show {
    padding-top: 0.4rem;
    font-size: 0.4rem;
    color: #5e5e5e;
    line-height: 0.61333rem;
  }

  .body .shop .show-foot {
    padding: 0 0.26666rem;
  }

  .body .shop .show-foot .tools-item {
    float: left;
    padding: 0.4rem 0;
    color: #aaa;
  }

  .body .shop .show-foot .tools-item a {
    float: right;
    color: #aaa;
    display: inline-block;
  }

  .body .shop .show-foot .address span {
    margin-top: -1px;
    width: 4.2rem;
    display: inline-block;
    overflow: hidden;
    font-size: 0.32rem;
    height: 0.4rem;
  }

  .body .shop .show-foot .tools-item.other {
    text-align: right;
  }

  .body .shop .show-foot .tools-item i {
    float: left;
    margin-top: 1px;
    margin-right: 0.1rem;
  }

  .body .shop .show-foot .tools-item i.icon-eye {
    float: right;
  }

  .body .shop .show-foot .tools-item .count {
    float: right;
    padding-top: 0.05333rem;
    font-size: 0.32rem;
  }

  .body .shop .show-foot .tools-item .like {
    margin-top: 0.02666rem;
    display: inline-block;
    font-size: 0.32rem;
  }

  .offer-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.30666rem;
    box-shadow: 0 -5px 10px rgba(102, 102, 102, .1);
    background-color: #fff;
    overflow: hidden;
    /*z-index: 333;*/
  }

  .offer-box .tool {
    float: left;
    width: 28%;
  }

  .offer-box .tool ul {
    overflow: hidden;
  }

  .offer-box .tool ul li {
    float: left;
    width: 50%;
    padding: 0.18666rem 0;
    text-align: center;
    font-size: 0.29333rem;
    color: #aaa;
  }

  .offer-box .calculator {
    float: left;
    width: 48%;
  }

  .offer-box .pay {
    float: left;
    padding: 0.44rem 0;
    width: 24%;
    height: inherit;
    color: #fff;
    font-size: 0.42666rem;
    text-align: center;
    line-height: 1;
    background-color: #A30000;
    display: block;
  }

  .offer-box .onerror {
    background: #aaa;
    color: #fff;
  }

  .offer-box .calculator .weui-cell {
    padding: 0.26666rem 0 !important;
    display: inline-block;
  }

  /*新增店铺信息*/

  .shopWrap {
    width: 100%;
  }

  .selling {
    width: 100%;
    height: 100%;
  }

  .recShop {
    height: 1.3rem;
    line-height: 1.3rem;
    background: #fff;
    font-size: 0.4rem;
    padding: 0 0.26rem;
  }

  .selling ul {
    width: 100%;
    padding: 0 0.26rem;
    overflow: hidden;
    background: #fff;
  }

  .selling ul li {
    position: relative;
    float: left;
    width: 4.61rem;
    /*height: 4.48rem;*/
    margin-bottom: 0.26rem;
  }

  .selling ul li:nth-child(even) {
    margin-left: 0.18rem;
  }

  .selling ul li .list_bg {
    width: 4.61rem;
    height: 2.96rem;
  }

  .selling ul li .Info {
    width: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    height: 2.96rem;
  }

  .selling ul li .Info > span {
    background: #da4240;
    color: #fff;
    width: 1.41rem;
    height: 0.53rem;
    font-size: 0.32rem;
    margin-left: 0.26rem;
    display: inline-block;
    line-height: 0.53rem;
    text-align: center;
    border-bottom-left-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
  }

  .selling ul li .Info p {
    position: absolute;
    bottom: 0;
    line-height: 0.66rem;
    height: 0.66rem;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
  }

  .selling .count-down {
    color: #fff;
    height: 0.53rem;
    margin-left: 0.26rem;
  }

  .selling ul li .desc {
    width: 100%;
    border: solid 1px #e6e6e6;
    border-top: none;
    padding-left: 0.21rem;
  }

  .selling ul li .desc .title {
    width: 100%;
    font-size: 0.34rem;
    color: #333;
    height: 0.8rem;
    line-height: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .selling ul li .desc .price {
    margin: 0 0 0.26rem;
  }

  .selling ul li .desc .price span {
    color: #aaa;
    font-size: 0.29rem;
  }

  .selling ul li .desc .price b {
    color: #cd302e;
    margin-left: 0.13rem;
    font-size: 0.34rem;
  }

  .signup-free {
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    overflow: hidden;
    background: #ffeef1;
  }

  .signup-free img {
    float: left;
    margin: 0.1rem 0.26rem;
    width: 0.74rem;
    height: 0.74rem;
  }

  .signup-free p {
    float: left;
    font-size: 0.32rem;
    color: #e93d5e;
  }
</style>

<style>
  .offer-box .calculator .vux-number-selector {
    height: 0.77333rem !important;
    width: 0.77333rem !important;
    padding: 0.10666rem 0;
    border-radius: 0.05333rem;
    text-align: center;
    font-size: 0.4rem;
    line-height: 0.77333rem;
    color: #fff;
    border: none;
    background-color: #DA4240;
  }

  .offer-box .calculator .vux-number-selector.vux-number-disabled svg {
    fill: #fff;
  }

  .offer-box .calculator .vux-number-selector svg {
    fill: #fff;
  }

  .offer-box .calculator .vux-number-selector.vux-number-disabled {
    background-color: #ccc;
  }

  .offer-box .calculator .vux-number-input {
    height: 0.77333rem !important;
    color: #DA4240;
    font-size: 0.53333rem;
    border: none;
  }

  .offer-box .calculator .vux-cell-primary > div {
    padding-left: 0.42666rem;
    float: none !important;
    overflow: hidden;
  }

  #Detail .endtxt {
    font-size: 0.29333rem;
    display: inline-block;
  }
</style>
